html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  min-width: 1000px;
  min-height: 500px;
}
body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.headOperation {
  position: fixed;
  z-index: 2;
  width: 50%;
  left: 25%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0 0 25px 25px;
  transition: 0.5s;
}
.headOperation-after {
  position: absolute;
  top: calc(100% + 1px);
  background-color: rgba(0, 0, 0, 0.5);
  width: 30%;
  left: calc(70% / 2);
  border-radius: 0 0 25px 25px;
}
.headOperation-after {
  cursor: pointer;
  display: flex;
  justify-content: center;
}
.headOperation-head {
  display: flex;
  flex-direction: row;
}
.headOperation-head > div {
  flex: 1;
  padding: 15px 0;
  color: var(--z14);
  text-align: center;
  cursor: pointer;
  font-size: var(--x3);
}

.size {
  --x1: 4px;
  --x2: 8px;
  --x3: 12px;
  --x4: 16px;
  --x5: 20px;
  --x6: 24px;
  --x7: 28px;
  --x8: 32px;
  --x9: 36px;
  --x10: 40px;
  --x11: 44px;
  --x12: 48px;
  --x13: 52px;
  --x14: 56px;
  --x15: 60px;
  --x16: 64px;
}
.color {
  --z0: #111827;
  --a0: #2a1c26;
  --b0: #2a2429;
  --c0: #162730;
  --z1: #1e2433;
  --a1: #421f24;
  --b1: #45322a;
  --c1: #1c3b3b;
  --z2: #2b313f;
  --a2: #5a2122;
  --b2: #60422b;
  --c2: #1f4f47;
  --z3: #393e4c;
  --a3: #71231f;
  --b3: #7b522a;
  --c3: #226452;
  --z4: #474c59;
  --a4: #89221c;
  --b4: #976328;
  --c4: #227a5e;
  --z5: #565a66;
  --a5: #a22018;
  --b5: #b47424;
  --c5: #20906a;
  --z6: #656974;
  --a6: #bb1b13;
  --b6: #d1861d;
  --c6: #1ba776;
  --z7: #747782;
  --a7: #d4100b;
  --b7: #f0990f;
  --c7: #0ebf82;
  --z8: #848790;
  --a8: #e62b18;
  --b8: #ffa723;
  --c8: #31ce8f;
  --z9: #94969f;
  --a9: #ee5035;
  --b9: #ffb146;
  --c9: #59d49c;
  --z10: #a4a6ae;
  --a10: #f66d50;
  --b10: #ffbc63;
  --c10: #76dbaa;
  --z11: #b4b7bd;
  --a11: #fb866c;
  --b11: #ffc67d;
  --c11: #8fe0b7;
  --z12: #c5c7cc;
  --a12: #ff9f88;
  --b12: #ffd197;
  --c12: #a7e6c5;
  --z13: #d6d8db;
  --a13: #ffb7a5;
  --b13: #ffdbb1;
  --c13: #bdecd3;
  --z14: #e7e9eb;
  --a14: #ffcfc3;
  --b14: #ffe6cb;
  --c14: #d2f1e1;
  --z15: #f9fafb;
  --a15: #fee6e1;
  --b15: #fef1e5;
  --c15: #e8f6ef;
  --d0: #152239;
  --e0: #181e39;
  --f0: #1f1d39;
  --g0: #291d30;
  --d1: #1a3050;
  --e1: #202651;
  --f1: #2f2251;
  --g1: #43223b;
  --d2: #1d3d69;
  --e2: #282e69;
  --f2: #3f2769;
  --g2: #5e2647;
  --d3: #1e4c82;
  --e3: #303782;
  --f3: #502b82;
  --g3: #7a2953;
  --d4: #1e5a9d;
  --e4: #383f9d;
  --f4: #622e9d;
  --g4: #962a5f;
  --d5: #1c69b8;
  --e5: #4047b8;
  --f5: #7430b8;
  --g5: #b32a6c;
  --d6: #1779d4;
  --e6: #4750d4;
  --f6: #8732d4;
  --g6: #d12678;
  --d7: #0b89f0;
  --e7: #4e59f0;
  --f7: #9933f0;
  --g7: #ef2085;
  --d8: #3797ff;
  --e8: #6366ff;
  --f8: #aa43ff;
  --g8: #ff3892;
  --d9: #62a3ff;
  --e9: #7e78ff;
  --f9: #b85fff;
  --g9: #ff5c9f;
  --d10: #7fafff;
  --e10: #958aff;
  --f10: #c477ff;
  --g10: #ff78ac;
  --d11: #98bbfe;
  --e11: #a99cff;
  --f11: #cf8fff;
  --g11: #ff91b9;
  --d12: #aec8fe;
  --e12: #bbafff;
  --f12: #daa5ff;
  --g12: #ffa8c6;
  --d13: #c3d4fd;
  --e13: #cdc2fe;
  --f13: #e3bbfe;
  --g13: #ffbed4;
  --d14: #d7e2fd;
  --e14: #ddd6fd;
  --f14: #ebd1fd;
  --g14: #ffd4e1;
  --d15: #eaeffc;
  --e15: #ece9fc;
  --f15: #f3e8fc;
  --g15: #fde9ef;
}
